<!DOCTYPE html>
<html lang="en">
<head>
	<style>
		svg{border:1px solid #ccc;}
	</style>
</head>
<body>
	
	<svg width="200" height="200" viewBox="-20 -50 100 100">
        <path d="M0 0 A30 30 0 0 1 60 0A30 30 0 0 1 0 0"
            fill="none" stroke="#00f" />

        <circle cx="0" cy="0" r="3" fill="#f00" fill-opacity="0.8">
            <animateMotion 
                begin="t.click"
                path="M0 0 A30 30 0 0 1 60 0A30 30 0 0 1 0 0"
                dur="2s"  fill="freeze">
            </animateMotion>
        </circle>
		
		<text x="30" y="40" font-size="8" text-anchor="middle" id="t" style="cursor:pointer;user-select:none">点我</text>
	</svg>


	

</body>
</html>